<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部区域 -->
      <el-header>无忧社区管理系统</el-header>
      <!-- 主体区域 -->
      <el-container>
        <!-- 侧边栏 -->

        <el-aside :width="isExpand ? '64px' : '200px'">
          <!-- 展开列 -->
          <div class="expand" @click="expand()">| | |</div>
          <el-menu active-text-color="#ffd04b" background-color="#333744" :default-active="$route.path" text-color="#fff"
            :collapse="isExpand" :collapse-transition="false" unique-opened :router="true">

            <el-sub-menu index="/admin">
              <template #title>
                <el-icon>
                  <Avatar />
                </el-icon>
                <span>管理员</span>
              </template>
              <el-menu-item index="/admin">
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>管理员信息 </span>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/volunteer">
              <template #title>
                <el-icon>
                  <Operation />
                </el-icon>
                <span>志愿者管理</span>
              </template>
              <el-menu-item index="/volunteer">
                <el-icon>
                  <Comment />
                </el-icon>
                <span>志愿者信息 </span>
              </el-menu-item>
              <el-menu-item index="/check">

                <el-icon>
                  <Share />
                </el-icon>
                <span>志愿者审核</span>
              </el-menu-item>

              <el-menu-item index="/noChecked">
                <el-icon>
                  <WarnTriangleFilled />
                </el-icon>
                <span>审核未通过</span>
              </el-menu-item>

            </el-sub-menu>

            <el-sub-menu index="/activity">

              <template #title>
                <el-icon>
                  <Calendar />
                </el-icon>
                <span>活动中心</span>
              </template>

              <el-menu-item index="/activityall">
                <el-icon>
                  <List />
                </el-icon>
                <span>全部活动</span>
              </el-menu-item>

              <el-menu-item index="/orderactivity">
                <el-icon>
                  <Setting />
                </el-icon>
                <span>预约审核</span>
              </el-menu-item>

              <el-menu-item index="/orderSuccess">
                <el-icon><MagicStick /></el-icon>
                <span>预约成功</span>
              </el-menu-item>

              <el-menu-item index="/orderDefeat">
                <el-icon><WarnTriangleFilled /></el-icon>
                <span>预约失败</span>
              </el-menu-item>

            </el-sub-menu>

            <el-menu-item index="/life">
              <el-icon>
                <Reading />
              </el-icon>
              <span>百姓生活</span>
            </el-menu-item>

            <el-menu-item index="/community">
              <el-icon>
                <FolderChecked />
              </el-icon>
              <span>社区</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <!-- 路由部分 -->
          <el-main class="item_box">
            <!-- 组件路由部分 -->
            <router-view></router-view>
          </el-main>

          <!-- 页脚部分 -->
          <el-footer>全国无忧社区后台管理中心@123456.com</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    // 是否展开侧边栏
    const isExpand: any = ref(false)
    // 开关侧边栏的处理函数
    const expand = () => {
      isExpand.value = !isExpand.value
    }
    return {
      expand,
      isExpand
    }
  }
})
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
  width: 100%;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-header {
  background-color: #383d41;
  line-height: 60px;
  font-size: 26px;
  color: #fff;
  padding-left: 60px;
  font-family: 宋体;
}

.el-footer {
  background-color: #eee;
  text-align: center;
  font-size: 6px;
  font-family: sans-serif;
  color: #999;
  line-height: 40px;
  height: 40px;
}

.el-menu {
  height: 100%;
  background-color: #343744;
}

.el-sub-menu {
  background-color: #343744;
}

.expand {
  height: 25px;
  text-align: center;
  line-height: 25px;
  color: #eee;
  font-size: 10px;
  background-color: #4b5064;
}
.item_box{
  height: 100%;
}
</style>
